<template>
  <div class="group">
    <el-tabs type="border-card" style="min-height: 1500px;">
      <el-tab-pane label="接口分组">

        <el-button-group>
          <el-button type="primary" size="small" icon="el-icon-plus" @click="ckickAddGroup()">新建</el-button>
          <el-button type="success" size="small" @click="getGroup()">刷新<i class="el-icon-refresh"></i></el-button>
        </el-button-group>

        <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="group-input">
        </el-input>

        <el-tree class="filter-tree" :data="data" :filter-node-method="filterNode" ref="tree">
          <span class="custom-tree-node" slot-scope="{ node, data }">

            <i class="el-icon-folder"></i>
            <span>{{ node.label }}</span>

            <span v-if="node.isCurrent == true" class="el-tree-span">
              <i class="el-icon-plus" @click="ckickAddGroup(node, data)"></i>
              <i class="el-icon-edit" @click="editGroup(node, data)"></i>
              <i class="el-icon-delete" @click="deleteGroup(node, data)"></i>
            </span>

          </span>
        </el-tree>

      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
export default {
  data () {
    return {

      filterText: '',


      data: [{
        id: 1,
        label: '登录分组',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '注册分组',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '首页分组',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
    }
  },

  watch: {
    filterText (val, oldVall) {
      this.$refs.tree.filter(val);

    }

  },

  methods: {
    //过滤
    filterNode (value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

    //点击添加分组
    ckickAddGroup () {

    },

    //获取分组
    getGroup () { }

  },


  //编辑分组
  editGroup () {

  },

  //删除分组
  deleteGroup () { }
}
</script>

<style scoped>
.group {
  padding-top: 10px;
}
.group-input {
  padding-top: 6px;
  padding-bottom: 10px;
}

.group-input >>> .el-input__inner {
  height: 35px;
}

.custom-tree-node {
  font-size: 13px;
}

.el-tree-span {
  padding-left: 10px;
}
</style>